<template>
  <div>
    <topbar></topbar>
    <headbar :msg="hello"></headbar>
    <div id="hull">   
        <!-- <img src="images/u=1449289253,3012670016&fm=11&gp=0.jpg" width="400" height="500" style="position: absolute
        ;top:170px;left:80px;">      -->
        <div id="forgetbox">
            <!-- 输入新密码 -->
            <form class="forget">
                <h1 class="h3 mb-3 font-weight-normal">密码找回</h1>
        
                <input type="password" id="inputPassword1" class="form-control" placeholder="请输入新密码" required="" autofocus=""
                    v-model="Password1">
                <br>
                <input type="password" id="inputPassword2" class="form-control" placeholder="请再次输入新密码" required="" autofocus=""
                    v-model="Password2">
                <br>
                <input type="text" id="inputTNumber" class="form-control" placeholder="请输入绑定的手机号" required="" autofocus=""
                    v-model="TNumber">
                <br>
                <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="GetCode">
                    <span v-show="!login.canGet">{{login.waitTime+"s后重新获取"}}</span>
                    <span v-show="login.canGet">获取手机验证码</span>
                </button>
                <br>
                <label for="inputPassword" class="sr-only">请输入验证码</label>
                <input type="password" id="inputCode" class="form-control" placeholder="验证码" v-model="Code">
                <br>
                <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
            </form>
        </div>
        <!-- <img src="images/u=1449289253,3012670016&fm=11&gp=0.jpg" width="400" height="500" style="position: absolute
        ;top:170px;right:80px;">  -->
    </div>
  </div>
</template>

<script>
import topbar from '../../common/topbar.vue';
import headbar from '../../common/headbar.vue';

export default {
     data() {
            return {
                TNumber: '',
                Password1: '',
                Password2:'',
                Code: '',
                tempLogin: {
                    canGet: true,
                    timer: null,
                    waitTime: 60
                },
                hello:'密码找回'
            }
        },
        computed: {
            login() { //最终对象
                if (!this.tempLogin.canGet) {
                    return this.timeCountdown(this.tempLogin);
                } else {
                    return this.tempLogin;
                }
            }
        },
        methods: {
            timeCountdown (obj) {  //obj包括timer、waitTime 、canGet
                const TIME_COUNT = 60; //默认倒计时秒数
                if (!obj.timer) {
                    obj.waitTime = TIME_COUNT;
                    obj.canGet = false;
                    obj.timer = setInterval(() => {
                        if (obj.waitTime > 0 && obj.waitTime <= TIME_COUNT) {
                            obj.waitTime--;
                        } else {
                            obj.canGet = true;
                            clearInterval(obj.timer); //清空定时器
                            obj.timer = null;
                        }
                    }, 1000)
                }
                return {
                    timer: obj.timer,
                    canGet: obj.canGet,
                    waitTime: obj.waitTime
                }
            },
            GetCode () {
                if(this.Password1 !== this.Password2){
                    alert("两次输入密码不一致，请重新输入")
                    this.Password1=this.Password2=this.Number=''
                    return
                }
                if (!(/^1[3456789]\d{9}$/.test(this.TNumber))) {
                    alert("输入手机号码格式有误")
                } else {
                    this.timeCountdown(this.login)
                }
            },
        },
        components:{
            topbar,
            headbar
        }
}
</script>

    <style>
        #forgetbox{
            top: 400px;
            left: 830px;
            width: 500px;
            
        }
        .forget{
             
             position: absolute;
             top: 200px;
             left: 580px;
             width: 350px;    
        }
        .hull{
            position: absolute;
            top:150px;
            left: 550px;
            width: 500px;
            border-style: solid;
        }

    </style>